<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧农场可视化中心</title>
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="chart.umd.min.js" as="script">
    <script src="chart.umd.min.js"></script>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&family=Orbitron:wght@400;700&display=swap" as="style">
    
    <!-- Model-Viewer 3D模型库 -->
    <script type="module" src="https://unpkg.com/@google/model-viewer@^3.4.0/dist/model-viewer.min.js"></script>
    <script nomodule src="https://unpkg.com/@google/model-viewer@^3.4.0/dist/model-viewer-legacy.js"></script>
    
    <!-- 使用更快的CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #00aeff;
            --panel-bg-color: rgba(6, 25, 48, 0.7);
            --panel-border-color: rgba(0, 174, 255, 0.3);
            --text-color: #e0e0e0;
            --text-color-secondary: #a0a0a0;
            --glow-color: rgba(0, 174, 255, 0.5);
            --text-glow: 0 0 5px rgba(0, 174, 255, 0.5);
        }
        
        /* 增强动画效果 */
        @keyframes subtle-gradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(0,174,255,0.15); }
            50% { box-shadow: 0 0 30px rgba(0,174,255,0.3); }
        }
        
        @keyframes scan-line {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100vh); }
        }
        
        /* 漫游控制样式 */
        .walk-controls {
            position: absolute;
            bottom: 80px;
            right: 20px;
            background: rgba(0, 21, 41, 0.9);
            border: 1px solid var(--panel-border-color);
            border-radius: 8px;
            padding: 15px;
            backdrop-filter: blur(10px);
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .walk-control-row {
            display: flex;
            justify-content: center;
            gap: 8px;
        }
        
        .walk-btn {
            background: rgba(0, 174, 255, 0.2);
            border: 1px solid var(--panel-border-color);
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            padding: 12px;
            border-radius: 6px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 45px;
            min-height: 45px;
        }
        
        .walk-btn:hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
            box-shadow: 0 0 15px var(--primary-color);
            transform: scale(1.1);
        }
        
        .walk-btn:active {
            transform: scale(0.95);
        }
        
        .walk-btn[data-action="reset"] {
            min-width: 80px;
            font-size: 14px;
            gap: 5px;
        }
        
        body, html {
            margin: 0; padding: 0; height: 100%; width: 100%;
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #02101e;
            color: var(--text-color);
            overflow: hidden;
        }
        
        /* 添加矩阵雨效果 */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(0, 174, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(0, 174, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(0, 174, 255, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: -1;
        }
        
        .container {
            display: grid;
            grid-template-columns: 350px 1fr 400px;
            grid-template-rows: 60px 50px 1fr;
            height: 100vh;
            gap: 10px; padding: 10px;
            box-sizing: border-box;
            background: linear-gradient(to bottom, #02101e, #041830);
        }
        
        .header {
            grid-column: 1 / 4; grid-row: 1;
            display: flex; justify-content: space-between; align-items: center;
            background: #02101e; padding: 0 20px;
            position: relative;
        }
        
        .farm-selector {
            display: flex; align-items: center; gap: 8px;
            padding: 6px 12px;
            background: rgba(0, 174, 255, 0.1);
            border: 1px solid rgba(0, 174, 255, 0.3);
            border-radius: 4px; color: var(--primary-color);
            cursor: pointer; font-size: 16px;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .farm-selector:hover {
            background: rgba(0, 174, 255, 0.2);
            box-shadow: 0 0 10px rgba(0, 174, 255, 0.3);
        }
        
        .farm-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: rgba(6, 25, 48, 0.95);
            border: 1px solid var(--panel-border-color);
            border-radius: 4px;
            padding: 8px 0;
            min-width: 200px;
            display: none;
            z-index: 1000;
            backdrop-filter: blur(10px);
        }
        
        .farm-dropdown.show {
            display: block;
        }
        
        .farm-option {
            padding: 8px 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex; align-items: center; gap: 8px;
        }
        
        .farm-option:hover {
            background: rgba(0, 174, 255, 0.1);
            color: var(--primary-color);
        }
        
        .farm-option.active {
            background: rgba(0, 174, 255, 0.2);
            color: var(--primary-color);
        }
        
        .header-title {
            position: absolute; left: 50%;
            transform: translateX(-50%);
            color: #fff; font-size: 32px; font-weight: 700;
            letter-spacing: 4px;
            text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color);
            animation: pulse-glow 3s ease-in-out infinite;
        }
        
        .header-datetime {
            font-family: 'Orbitron', sans-serif; font-size: 18px;
            color: var(--primary-color);
            text-shadow: var(--text-glow);
        }
        
        .main-nav {
            grid-column: 1 / 4; grid-row: 2;
            width: 100vw; background: rgba(0,28,58,0.85);
            display: flex; justify-content: center; align-items: center;
            gap: 24px; padding: 0 0 8px 0;
            border-bottom: 1px solid var(--panel-border-color);
            z-index: 100;
        }
        
        .nav-item {
            color: var(--text-color-secondary);
            font-size: 16px; font-family: 'Orbitron', 'Noto Sans SC', sans-serif;
            padding: 10px 18px; cursor: pointer;
            border-radius: 6px 6px 0 0;
            display: flex; align-items: center; gap: 6px;
            position: relative; background: transparent;
            transition: all 0.3s ease;
        }
        
        .nav-item::after {
            content: ''; position: absolute;
            bottom: 0; left: 50%;
            transform: translateX(-50%);
            width: 0; height: 3px;
            background: var(--primary-color);
            transition: width 0.3s ease;
            box-shadow: 0 0 8px var(--glow-color);
            border-radius: 2px;
        }
        
        .nav-item.active, .nav-item:hover {
            color: var(--primary-color);
            background: rgba(0,174,255,0.1);
            text-shadow: 0 0 5px var(--glow-color);
        }
        
        .nav-item:hover::after, .nav-item.active::after { width: 80%; }
        
        .panel {
            background: linear-gradient(145deg, rgba(6, 25, 48, 0.7), rgba(6, 25, 48, 0.85));
            background-size: 200% 200%;
            animation: subtle-gradient 15s ease infinite;
            border: 1px solid var(--panel-border-color);
            border-radius: 4px; padding: 15px;
            margin: 0; display: flex; flex-direction: column;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,174,255,0.15);
            position: relative;
        }
        
        /* Model-Viewer 样式 */
        model-viewer {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #02101e 0%, #041830 50%, #02101e 100%);
            border-radius: 8px;
            --poster-color: transparent;
            --progress-bar-color: var(--primary-color);
            --progress-bar-height: 3px;
        }
        
        .model-container {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            overflow: hidden;
            background: rgba(0,28,58,0.3);
            border: 1px solid var(--panel-border-color);
        }
        
        .model-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }
        
        .model-btn {
            background: rgba(0, 21, 41, 0.8);
            border: 1px solid var(--panel-border-color);
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            padding: 8px 15px;
            border-radius: 6px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            backdrop-filter: blur(10px);
        }
        
        .model-btn:hover {
            background: var(--primary-color);
            border-color: var(--primary-color);
            box-shadow: 0 0 15px var(--primary-color);
        }
        
        .model-btn.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            box-shadow: 0 0 15px var(--primary-color);
        }
        
        .model-info {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0, 21, 41, 0.8);
            border: 1px solid var(--panel-border-color);
            border-radius: 6px;
            padding: 10px;
            backdrop-filter: blur(10px);
            z-index: 10;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 5px;
            font-size: 14px;
        }
        
        .info-item:last-child {
            margin-bottom: 0;
        }
        
        .info-item i {
            color: var(--primary-color);
            width: 16px;
        }
        
        /* 科幻风格背景网格 */
        .model-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 174, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 174, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
            z-index: -1;
        }
        
        .panel-content {
            flex-grow: 1; display: flex; flex-direction: column;
            gap: 8px; overflow-y: auto;
            max-height: calc(100vh - 150px);
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color) transparent;
        }
        
        .panel-content::-webkit-scrollbar { width: 4px; }
        .panel-content::-webkit-scrollbar-track { background: transparent; }
        .panel-content::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 2px; }
        
        .panel-title{
            color: var(--primary-color);
            font-size:18px; font-weight: bold;
            display: flex; align-items: center;
            gap: 8px; margin-bottom: 6px;
            position: relative; padding-left: 15px;
        }
        
        .panel-title::before {
            content: ''; position: absolute;
            left: 0; top: 50%;
            transform: translateY(-50%);
            width: 4px; height: 18px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }
        
        .main-content{
            grid-row: 3;
            border:1px solid var(--panel-border-color);
            border-radius:4px; overflow:hidden;
            background: linear-gradient(135deg, rgba(0,28,58,0.8) 0%, rgba(0,10,20,0.9) 100%);
            position: relative;
        }
        
        .view-controls {
            position: absolute; bottom: 20px; left: 50%;
            transform: translateX(-50%);
            display: flex; gap: 10px;
            background: rgba(0, 28, 58, 0.7);
            padding: 8px; border-radius: 8px;
            border: 1px solid var(--panel-border-color);
        }
        
        .view-btn {
            background: transparent; border: 1px solid var(--primary-color);
            color: var(--primary-color); padding: 8px 16px;
            border-radius: 4px; cursor: pointer;
            display: flex; align-items: center; gap: 8px;
            transition: all 0.3s ease;
        }
        
        .view-btn.active, .view-btn:hover {
            background: var(--primary-color); color: #fff;
            box-shadow: 0 0 10px var(--glow-color);
        }
        
        .page-content { width: 100%; height: 100%; }
        
        .card {
            background: rgba(0,28,58,0.25);
            border-radius: 6px; padding: 10px;
            margin-bottom: 8px;
            border: 1px solid rgba(0,174,255,0.1);
            transition: all 0.3s ease;
        }
        
        .card:hover {
            border-color: rgba(0,174,255,0.3);
            box-shadow: 0 0 15px rgba(0,174,255,0.1);
        }
        
        .weather-card-reloaded {
            display: flex; align-items: center;
            padding: 12px; gap: 20px;
        }
        
        .weather-main {
            display: flex; align-items: center;
            gap: 10px; border-right: 1px solid var(--panel-border-color);
            padding-right: 20px;
        }
        
        .weather-temp {
            font-size: 42px; font-weight: 700;
            font-family: 'Orbitron', sans-serif;
            color: #fff;
        }
        
        .weather-icon-container { display: flex; flex-direction: column; align-items: center; gap: 5px; }
        .weather-icon-container i { font-size: 28px; color: var(--primary-color); }
        .weather-icon-container span {
            background: #1e628a; color: #fff;
            padding: 2px 8px; border-radius: 4px;
            font-size: 12px;
        }
        
        .weather-forecast-reloaded { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
        .forecast-item-reloaded { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
        .forecast-item-reloaded i { color: #a0a0a0; }
        
        .env-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .env-item { padding: 8px; text-align: center; color: #fff; }
        .env-item i { font-size: 20px; color: var(--primary-color); }
        .env-value { font-size: 16px; font-weight: bold; margin: 5px 0; }
        .env-label { font-size: 12px; color: var(--text-color-secondary); }

        .device-stats { display: flex; justify-content: space-around; align-items: center; padding: 8px 0; }
        .stat-item, .stat-item-center { text-align: center; }
        .total-devices { font-size: 24px; font-weight: bold; color: var(--primary-color); }
        .progress-circle {
            width: 70px; height: 70px; border-radius: 50%;
            display: grid; place-items: center;
            background: conic-gradient(var(--primary-color) calc(var(--p, 0) * 1%), #2c3e50 0);
            position: relative; margin: 0 auto 5px;
        }
        .progress-circle::before {
            content: ""; position: absolute;
            width: 55px; height: 55px;
            background: var(--panel-bg-color); border-radius: 50%;
        }
        .progress-value { position: relative; font-size: 18px; font-weight: bold; color: #fff; }
        .progress-circle.p93 { --p: 93; }
        .stat-label { font-size: 14px; color: var(--text-color-secondary); }

        .device-list-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
        .device-list-table th, .device-list-table td { text-align: center; padding: 6px 4px; border: none; }
        .device-list-table thead { background: rgba(0, 174, 255, 0.1); color: var(--text-color); }
        .device-list-table tbody tr:nth-child(even) { background-color: rgba(0, 28, 58, 0.2); }
        .status-running { color: #00ff00; }
        .status-standby { color: #ffa500; }

        .alarm-list { display: flex; flex-direction: column; gap: 6px; }
        .alarm-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 6px; background: rgba(0,174,255,0.05);
            border-left: 3px solid #ffa500; font-size: 12px;
        }
        .alarm-status { padding: 2px 6px; border-radius: 4px; font-size: 11px; color: white; }
        .alarm-status.new { background-color: #ff4d4f; }
        .alarm-status.handled { background-color: #5a677d; }

        .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .video-item {
            position: relative; border-radius: 4px;
            overflow: hidden; border: 1px solid var(--panel-border-color);
            aspect-ratio: 16 / 10;
            background: rgba(0,28,58,0.3);
        }
        .video-item img { 
            width: 100%; height: 100%; 
            object-fit: cover; display: block; 
            transition: transform 0.3s ease;
            opacity: 0;
            animation: fadeIn 0.5s ease forwards;
        }
        @keyframes fadeIn { to { opacity: 1; } }
        .video-item:hover img { transform: scale(1.1); }
        .video-label, .video-status {
            position: absolute; background: rgba(0, 0, 0, 0.6);
            padding: 2px 6px; font-size: 12px;
            border-radius: 4px; color: #fff;
        }
        .video-label { top: 5px; left: 5px; }
        .video-status { bottom: 5px; left: 5px; display: flex; align-items: center; }
        .video-status.online::before {
            content: ''; display: inline-block;
            width: 8px; height: 8px;
            background-color: #00ff00; border-radius: 50%;
            margin-right: 5px;
            box-shadow: 0 0 5px #00ff00;
        }

        .energy-analysis-section .panel-title span { font-size: 14px; color: var(--text-color-secondary); margin-left: auto; }
        .energy-tabs { display: flex; border-bottom: 1px solid var(--panel-border-color); margin-bottom: 10px; }
        .energy-tab-btn {
            z-index: 10; /* 确保按钮在最上层 */
            pointer-events: auto; /* 确保可以点击 */
            background: transparent; border: none; color: var(--text-color-secondary);
            padding: 8px 16px; cursor: pointer; font-size: 14px; position: relative;
        }
        .energy-tab-btn::after {
            content: ''; position: absolute; bottom: -1px; left: 0;
            width: 0; height: 2px; background: var(--primary-color);
            transition: width 0.3s ease;
        }
        .energy-tab-btn.active, .energy-tab-btn:hover { color: var(--primary-color); }
        .energy-tab-btn.active::after, .energy-tab-btn:hover::after { width: 100%; }
        
        .energy-stats-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
        .energy-card { padding: 10px; text-align: center; background: rgba(0, 28, 58, 0.4); border-radius: 4px; }
        .energy-value { font-size: 20px; font-weight: bold; font-family: 'Orbitron', sans-serif; color: #fff; }
        .energy-label { font-size: 12px; color: var(--text-color-secondary); margin: 4px 0; }
        .energy-change { font-size: 12px; }
        .energy-change.down { color: #00ff00; }
        .energy-change.up { color: #ff4d4f; }
        .energy-chart-container { 
            height: 200px; 
            width: 100%;
            position: relative;
            background: rgba(0, 28, 58, 0.3);
            border-radius: 4px;
            padding: 10px;
            margin-top: 10px;
            min-height: 200px;
            overflow: hidden;
        }
        
        .energy-chart-container canvas {
            width: 100% !important;
            height: 100% !important;
            display: block;
            max-width: none !important;
            max-height: none !important;
        }
        
        .disease-list { display: flex; flex-direction: column; gap: 6px; }
        .disease-item {
            display: flex; justify-content: space-between;
            align-items: center; padding: 8px;
            background: rgba(0,28,58,0.3); border-radius: 4px;
        }
        .disease-name { font-size: 14px; }
        .disease-probability { font-size: 14px; font-weight: 500; }
        .disease-probability.high { color: #ff4d4f; }
        .disease-probability.medium { color: #ffa500; }
        .disease-probability.low { color: #00ff00; }
        
        /* 3D农场模型样式 */
        .farm-3d-model {
            width: 100%;
            height: 100%;
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
            min-height: 400px;
        }
            width: 100%;
            height: 100%;
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        
        .sky {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 60%;
            background: linear-gradient(to bottom, #87CEEB, #4682B4);
            border-radius: 8px 8px 0 0;
        }
        
        .ground {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(to top, #8FBC8F, #556B2F);
            border-radius: 0 0 8px 8px;
        }
        
        .greenhouse {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateY(-15deg) rotateX(10deg);
            width: 200px;
            height: 120px;
            transform-style: preserve-3d;
        }
        
        .greenhouse-roof {
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            height: 40px;
            background: linear-gradient(45deg, rgba(255,255,255,0.8), rgba(255,255,255,0.3));
            clip-path: polygon(0 100%, 50% 0, 100% 100%);
            transform: rotateX(-30deg);
        }
        
        .greenhouse-wall {
            position: absolute;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.3);
        }
        
        .greenhouse-wall.front {
            width: 200px;
            height: 120px;
            transform: translateZ(0);
        }
        
        .greenhouse-wall.back {
            width: 200px;
            height: 120px;
            transform: translateZ(-100px) rotateY(180deg);
        }
        
        .greenhouse-wall.left {
            width: 100px;
            height: 120px;
            transform: translateX(-50px) rotateY(-90deg);
        }
        
        .greenhouse-wall.right {
            width: 100px;
            height: 120px;
            transform: translateX(50px) rotateY(90deg);
        }
        
        .plants {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
        }
        
        .plant {
            position: absolute;
            width: 20px;
            height: 30px;
            background: linear-gradient(to top, #228B22, #32CD32);
            border-radius: 50% 50% 0 0;
            animation: grow 3s ease-in-out infinite;
        }
        
        .plant-1 { top: 20%; left: 20%; animation-delay: 0s; }
        .plant-2 { top: 30%; left: 40%; animation-delay: 0.5s; }
        .plant-3 { top: 25%; left: 60%; animation-delay: 1s; }
        .plant-4 { top: 60%; left: 25%; animation-delay: 1.5s; }
        .plant-5 { top: 70%; left: 45%; animation-delay: 2s; }
        .plant-6 { top: 65%; left: 65%; animation-delay: 2.5s; }
        
        @keyframes grow {
            0%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(1.1); }
        }
        
        .equipment {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .fan {
            position: absolute;
            top: -80px;
            left: -100px;
            width: 30px;
            height: 30px;
            background: #4682B4;
            border-radius: 50%;
            animation: rotate 2s linear infinite;
        }
        
        .light {
            position: absolute;
            top: -60px;
            right: -80px;
            width: 25px;
            height: 25px;
            background: #FFD700;
            border-radius: 50%;
            box-shadow: 0 0 10px #FFD700;
            animation: glow 1.5s ease-in-out infinite;
        }
        
        .sensor {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: #32CD32;
            border-radius: 50%;
            animation: pulse 2s ease-in-out infinite;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes glow {
            0%, 100% { box-shadow: 0 0 10px #FFD700; }
            50% { box-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700; }
        }
        
        @keyframes pulse {
            0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
            50% { transform: translateX(-50%) scale(1.2); opacity: 0.7; }
        }
        
        .model-info {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: rgba(0, 174, 255, 0.2);
            border: 1px solid rgba(0, 174, 255, 0.3);
            border-radius: 4px;
            color: white;
            font-size: 14px;
        }
        
        .info-item i {
            color: var(--primary-color);
        }
        
        /* 控制页面样式 */
        .control-dashboard {
            padding: 20px;
            color: white;
        }
        
        .control-section {
            margin-bottom: 30px;
        }
        
        .control-section h3 {
            color: var(--primary-color);
            margin-bottom: 20px;
            font-size: 18px;
        }
        
        .control-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .control-item {
            background: rgba(0, 28, 58, 0.3);
            border: 1px solid var(--panel-border-color);
            border-radius: 8px;
            padding: 20px;
        }
        
        .control-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: var(--primary-color);
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        .control-param {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .slider-control {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: rgba(255,255,255,0.2);
            outline: none;
        }
        
        .slider-control::-webkit-slider-thumb {
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
        }
        
        /* 其他页面样式 */
        .control-dashboard, .analysis-dashboard, .warning-dashboard, .report-dashboard {
            padding: 20px;
            color: white;
            height: 100%;
            overflow-y: auto;
        }
        
        .control-section {
            margin-bottom: 30px;
        }
        
        .control-section h3 {
            color: var(--primary-color);
            margin-bottom: 20px;
            font-size: 18px;
        }
        
        .control-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .control-item {
            background: rgba(0, 28, 58, 0.3);
            border: 1px solid var(--panel-border-color);
            border-radius: 8px;
            padding: 20px;
        }
        
        .control-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: var(--primary-color);
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        .control-param {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .slider-control {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: rgba(255,255,255,0.2);
            outline: none;
        }
        
        .slider-control::-webkit-slider-thumb {
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--primary-color);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="farm-selector" id="farmSelector">
                <i class="fas fa-map-marker-alt"></i>
                <span id="currentFarm">北京一号智慧农场</span>
                <i class="fas fa-chevron-down"></i>
                <div class="farm-dropdown" id="farmDropdown">
                    <div class="farm-option active" data-farm="北京一号智慧农场">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>北京一号智慧农场</span>
                    </div>
                    <div class="farm-option" data-farm="上海二号智慧农场">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>上海二号智慧农场</span>
                    </div>
                    <div class="farm-option" data-farm="深圳三号智慧农场">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>深圳三号智慧农场</span>
                    </div>
                    <div class="farm-option" data-farm="成都四号智慧农场">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>成都四号智慧农场</span>
                    </div>
                </div>
            </div>
            <h1 class="header-title">智慧农场可视化中心</h1>
            <div class="header-datetime" id="datetime"></div>
        </header>

        <nav class="main-nav">
            <a class="nav-item active" data-page="dashboard"><i class="fas fa-tachometer-alt"></i><span>数据总览</span></a>
            <a class="nav-item" data-page="control"><i class="fas fa-cogs"></i><span>设备控制</span></a>
            <a class="nav-item" data-page="analysis"><i class="fas fa-chart-pie"></i><span>数据分析</span></a>
            <a class="nav-item" data-page="warning"><i class="fas fa-exclamation-triangle"></i><span>告警中心</span></a>
            <a class="nav-item" data-page="report"><i class="fas fa-file-alt"></i><span>报表管理</span></a>
        </nav>
        
        <div class="panel" style="grid-row: 3; grid-column: 1;">
            <div class="panel-content">
                 <div class="card weather-card-reloaded">
                     <div class="weather-main">
                         <div class="weather-icon-container">
                            <i class="fas fa-sun"></i>
                            <span>晴</span>
                         </div>
                         <div class="weather-temp">28°</div>
                     </div>
                     <div class="weather-forecast-reloaded">
                        <div class="forecast-item-reloaded"><span>今天</span><i class="fas fa-sun"></i><span>20°/30°</span></div>
                        <div class="forecast-item-reloaded"><span>明天</span><i class="fas fa-cloud"></i><span>20°/30°</span></div>
                        <div class="forecast-item-reloaded"><span>后天</span><i class="fas fa-cloud-rain"></i><span>20°/30°</span></div>
                     </div>
                 </div>

                 <div class="card env-details-grid">
                    <div class="env-item">
                        <i class="fas fa-thermometer-half"></i>
                        <div class="env-value">28.5°C</div>
                        <div class="env-label">空气温度</div>
                    </div>
                    <div class="env-item">
                        <i class="fas fa-tint"></i>
                        <div class="env-value">65%</div>
                        <div class="env-label">空气湿度</div>
                    </div>
                    <div class="env-item">
                        <i class="fas fa-lightbulb"></i>
                        <div class="env-value">1800lux</div>
                        <div class="env-label">光照强度</div>
                    </div>
                    <div class="env-item">
                        <i class="fas fa-leaf"></i>
                        <div class="env-value">5.8</div>
                        <div class="env-label">土壤PH</div>
                    </div>
                    <div class="env-item">
                        <i class="fas fa-water"></i>
                        <div class="env-value">55%</div>
                        <div class="env-label">土壤湿度</div>
                    </div>
                    <div class="env-item">
                        <i class="fas fa-wind"></i>
                        <div class="env-value">1200ppm</div>
                        <div class="env-label">CO2浓度</div>
                    </div>
                </div>

                <div class="card device-monitoring-section">
                    <div class="panel-title"><i class="fas fa-chart-pie"></i>设备监控</div>
                    <div class="device-stats">
                        <div class="stat-item">
                            <div class="total-devices">26</div>
                            <div class="stat-label">设备总数</div>
                        </div>
                        <div class="stat-item-center">
                            <div class="progress-circle p93" id="device-online-rate">
                                <div class="progress-value">93%</div>
                            </div>
                            <div class="stat-label">在线率</div>
                        </div>
                        <div class="stat-item">
                            <div class="total-devices" style="color: #ff4d4f;">2</div>
                            <div class="stat-label">异常设备</div>
                        </div>
                    </div>
                    <div class="device-list-table">
                        <table>
                            <thead><tr><th>设备名称</th><th>状态</th><th>位置</th></tr></thead>
                            <tbody>
                                <tr><td>风机 #1</td><td class="status-running">运行中</td><td>A区</td></tr>
                                <tr><td>水帘 #1</td><td class="status-running">运行中</td><td>A区</td></tr>
                                <tr><td>补光灯 #3</td><td class="status-standby">待机</td><td>B区</td></tr>
                                <tr><td>滴灌阀 #5</td><td class="status-standby">待机</td><td>C区</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="card alarm-section">
                    <div class="panel-title"><i class="fas fa-bell"></i>监测预警</div>
                    <div class="alarm-list">
                        <div class="alarm-item"><span>CO2浓度过高</span><div class="alarm-status new">新告警</div></div>
                        <div class="alarm-item"><span>#3补光灯故障</span><div class="alarm-status new">新告警</div></div>
                        <div class="alarm-item"><span>A区温度过高</span><div class="alarm-status handled">已处理</div></div>
                        <div class="alarm-item"><span>土壤湿度偏低</span><div class="alarm-status new">新告警</div></div>
                        <div class="alarm-item"><span>B区光照不足</span><div class="alarm-status handled">已处理</div></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-content" style="grid-row: 3; grid-column: 2;">
            <div class="page-content" id="dashboard-main" style="display:block;">
                 <div class="model-container">
                    <!-- 3D模型展示 -->
                    <model-viewer
                        src="newModel.glb"
                        alt="智慧农场3D模型"
                        camera-controls
                        interaction-prompt="none"
                        shadow-intensity="1"
                        environment-image="neutral"
                        exposure="1"
                        shadow-softness="0.5"
                        camera-orbit="0deg 75deg 75%"
                        min-camera-orbit="auto auto 10%"
                        max-camera-orbit="auto auto 150%"
                        field-of-view="30deg"
                        min-field-of-view="10deg"
                        max-field-of-view="45deg"
                        loading="eager"
                        reveal="auto"
                        ar
                        ar-modes="webxr scene-viewer quick-look"
                        camera-target="0m 0m 0m"
                        animation-name=""
                        ar-scale="fixed"
                        ar-placement="floor"
                        touch-action="pan-y"
                        disable-zoom="false"
                        orbit-sensitivity="1"
                        interpolation-decay="200"
                        name="智慧农场模型"
                        style="width: 100%; height: 100%;">
                        
                        <!-- 加载进度条 -->
                        <div class="progress-bar hide" slot="progress-bar">
                            <div class="update-bar"></div>
                        </div>
                        
                        <!-- 后处理按钮 -->
                        <button slot="ar-button" id="ar-button">
                            <i class="fas fa-cube"></i> AR查看
                        </button>
                        
                        <!-- 全屏按钮 -->
                        <button slot="fullscreen-button" id="fullscreen-button">
                            <i class="fas fa-expand"></i>
                        </button>
                        
                        <!-- 相机控制按钮 -->
                        <button slot="camera-controls" id="camera-controls">
                            <i class="fas fa-camera"></i>
                        </button>
                    </model-viewer>
                    
                    <!-- 模型信息面板 -->
                    <div class="model-info">
                        <div class="info-item">
                            <i class="fas fa-thermometer-half"></i>
                            <span>28.5°C</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-tint"></i>
                            <span>65%</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-leaf"></i>
                            <span>健康</span>
                        </div>
                        <div class="info-item" id="walk-mode-status" style="display: none;">
                            <i class="fas fa-walking"></i>
                            <span style="color: var(--primary-color);">漫游模式已激活</span>
                        </div>
                    </div>
                    
                    <!-- 模型控制按钮 -->
                    <div class="model-controls">
                        <button class="model-btn active" id="exterior-view-btn" data-view="exterior">
                            <i class="fas fa-cube"></i> 外景
                        </button>
                        <button class="model-btn" id="interior-view-btn" data-view="interior">
                            <i class="fas fa-seedling"></i> 内景
                        </button>
                        <button class="model-btn" id="walk-mode-btn" data-mode="walk">
                            <i class="fas fa-walking"></i> 漫游
                        </button>
                    </div>
                    
                    <!-- 漫游控制面板 -->
                    <div class="walk-controls" id="walk-controls" style="display: none;">
                        <div class="walk-control-row">
                            <button class="walk-btn" id="walk-forward" data-direction="forward">
                                <i class="fas fa-chevron-up"></i>
                            </button>
                        </div>
                        <div class="walk-control-row">
                            <button class="walk-btn" id="walk-left" data-direction="left">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="walk-btn" id="walk-backward" data-direction="backward">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                            <button class="walk-btn" id="walk-right" data-direction="right">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                        <div class="walk-control-row">
                            <button class="walk-btn" id="walk-up" data-direction="up">
                                <i class="fas fa-arrow-up"></i>
                            </button>
                            <button class="walk-btn" id="walk-down" data-direction="down">
                                <i class="fas fa-arrow-down"></i>
                            </button>
                        </div>
                        <div class="walk-control-row">
                            <button class="walk-btn" id="walk-reset" data-action="reset">
                                <i class="fas fa-home"></i> 重置
                            </button>
                        </div>
                    </div>
                 </div>
            </div>
        </div>
        
        <div class="panel" style="grid-row: 3; grid-column: 3;">
            <div class="panel-content">
                 <div class="card video-monitoring-section">
                    <div class="panel-title"><i class="fas fa-video"></i>视频监控</div>
                    <div class="video-grid">
                        <div class="video-item">
                           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3a8a'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23ffffff' font-family='Arial' font-size='16'%3E1号大棚-番茄区%3C/text%3E%3C/svg%3E" alt="Greenhouse 1" loading="lazy">
                            <div class="video-label">1号大棚-番茄区</div>
                            <div class="video-status online">在线</div>
                        </div>
                        <div class="video-item">
                           <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3a8a'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23ffffff' font-family='Arial' font-size='16'%3E2号大棚-黄瓜区%3C/text%3E%3C/svg%3E" alt="Greenhouse 2" loading="lazy">
                            <div class="video-label">2号大棚-黄瓜区</div>
                            <div class="video-status online">在线</div>
                        </div>
                    </div>
                 </div>
                <div class="card energy-analysis-section">
                    <div class="panel-title"><i class="fas fa-chart-bar"></i>能耗分析 <span>2025-05-28</span></div>
                    <div class="energy-tabs">
                        <button class="energy-tab-btn active" data-type="electric">农场用电统计</button>
                        <button class="energy-tab-btn" data-type="water">农场用水统计</button>
                    </div>
                    <div class="energy-stats-cards">
                        <div class="energy-card">
                            <div class="energy-value" id="energy-value-day">4000</div>
                            <div class="energy-label" id="energy-label-day">本日总能耗 kw/h</div>
                            <div class="energy-change down" id="energy-change-day">较昨日 -15%</div>
                        </div>
                        <div class="energy-card">
                            <div class="energy-value" id="energy-value-month">95k</div>
                            <div class="energy-label" id="energy-label-month">本月总能耗 kw/h</div>
                            <div class="energy-change down" id="energy-change-month">较上月 -15%</div>
                        </div>
                        <div class="energy-card">
                            <div class="energy-value" id="energy-value-year">1.2M</div>
                            <div class="energy-label" id="energy-label-year">本年总能耗 kw/h</div>
                            <div class="energy-change up" id="energy-change-year">较去年 15%</div>
                        </div>
                    </div>
                    <div class="energy-chart-container">
                        <canvas id="energyAnalysisChart"></canvas>
                    </div>
                </div>
                <div class="card disease-analysis-section">
                    <div class="panel-title"><i class="fas fa-bug"></i>植物虫害病害分析</div>
                    <div class="disease-list">
                        <div class="disease-item"><div class="disease-name">灰霉病</div><div class="disease-probability high">高风险 85%</div></div>
                        <div class="disease-item"><div class="disease-name">蚜虫</div><div class="disease-probability medium">中风险 65%</div></div>
                        <div class="disease-item"><div class="disease-name">白粉病</div><div class="disease-probability low">低风险 25%</div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 基础功能立即执行
        (function() {
            // Datetime
            function updateDateTime() {
                const now = new Date();
                const year = now.getFullYear();
                const month = (now.getMonth() + 1).toString().padStart(2, '0');
                const day = now.getDate().toString().padStart(2, '0');
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                const seconds = now.getSeconds().toString().padStart(2, '0');
                document.getElementById('datetime').textContent = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
            setInterval(updateDateTime, 1000);
            updateDateTime();

            // 农场选择器
            const farmSelector = document.getElementById('farmSelector');
            const farmDropdown = document.getElementById('farmDropdown');
            const currentFarm = document.getElementById('currentFarm');
            const farmOptions = document.querySelectorAll('.farm-option');

            farmSelector.addEventListener('click', function(e) {
                e.stopPropagation();
                farmDropdown.classList.toggle('show');
            });

            document.addEventListener('click', function() {
                farmDropdown.classList.remove('show');
            });

            farmOptions.forEach(option => {
                option.addEventListener('click', function() {
                    const farmName = this.getAttribute('data-farm');
                    currentFarm.textContent = farmName;
                    
                    // 更新选中状态
                    farmOptions.forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                    
                    farmDropdown.classList.remove('show');
                });
            });

            // Page switching - 单页面应用切换
            document.querySelectorAll('.nav-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    document.querySelectorAll('.main-content .page-content').forEach(p => p.style.display = 'none');
                    const pageId = this.getAttribute('data-page') + '-main';
                    const page = document.getElementById(pageId);
                    if (page) {
                        page.style.display = 'block';
                    }
                });
            });

            // Set initial online rate
            const rate = 93;
            document.getElementById('device-online-rate').style.setProperty('--p', rate);
            document.querySelector('#device-online-rate .progress-value').textContent = `${rate}%`;
        })();

        // 图表功能 - 最简单版本
        let energyChart = null;
        
        // 能耗数据
        const energyData = {
            electric: {
                labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                values: [120, 150, 200, 250, 220, 180],
                stats: { day: 4000, month: '95k', year: '1.2M' },
                unit: 'kw/h'
            },
            water: {
                labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                values: [30, 40, 55, 60, 50, 45],
                stats: { day: 850, month: '22k', year: '250k' },
                unit: 'm³'
            }
        };
        
        // 初始化图表
        function initChart() {
            console.log('开始初始化图表...');
            
            const canvas = document.getElementById('energyAnalysisChart');
            if (!canvas) {
                console.error('找不到canvas元素');
                return;
            }
            
            console.log('找到canvas元素');
            
            // 创建图表
            energyChart = new Chart(canvas, {
                type: 'line',
                data: {
                    labels: energyData.electric.labels,
                    datasets: [{
                        label: '能耗',
                        data: energyData.electric.values,
                        borderColor: 'rgba(0, 174, 255, 1)',
                        backgroundColor: 'rgba(0, 174, 255, 0.2)',
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { ticks: { color: 'rgba(255,255,255,0.7)' } },
                        y: { ticks: { color: 'rgba(255,255,255,0.7)' } }
                    }
                }
            });
            
            console.log('图表创建成功');
            bindTabEvents();
        }
        
        // 绑定tab事件
        function bindTabEvents() {
            console.log('绑定tab事件...');
            const tabs = document.querySelectorAll('.energy-tab-btn');
            console.log('找到tab按钮数量:', tabs.length);
            
            tabs.forEach(btn => {
                btn.addEventListener('click', function() {
                    const type = this.getAttribute('data-type');
                    console.log('点击了tab:', type);
                    
                    // 更新按钮状态
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 更新图表
                    updateChart(type);
                });
            });
            
            console.log('tab事件绑定完成');
        }
        
        // 更新图表数据
        function updateChart(type) {
            console.log('更新图表:', type);
            if (!energyChart) {
                console.error('图表未初始化');
                return;
            }
            const data = energyData[type];
            if (!data) {
                console.error('数据不存在:', type);
                return;
            }
            // 更新图表数据
            energyChart.data.labels = data.labels;
            energyChart.data.datasets[0].data = data.values;
            energyChart.update();
            // 更新统计数据
            document.getElementById('energy-value-day').textContent = data.stats.day;
            document.getElementById('energy-value-month').textContent = data.stats.month;
            document.getElementById('energy-value-year').textContent = data.stats.year;
            document.getElementById('energy-label-day').textContent = `本日总能耗 ${data.unit}`;
            document.getElementById('energy-label-month').textContent = `本月总能耗 ${data.unit}`;
            document.getElementById('energy-label-year').textContent = `本年总能耗 ${data.unit}`;
            console.log('图表更新完成');
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            console.log('页面加载完成');
            setTimeout(function() {
                initChart();
                initModelControls();
            }, 100);
        });

        // 3D模型控制功能
        function initModelControls() {
            const modelViewer = document.querySelector('model-viewer');
            if (!modelViewer) {
                console.error('找不到model-viewer元素');
                return;
            }

            // 外景按钮
            const exteriorBtn = document.getElementById('exterior-view-btn');
            if (exteriorBtn) {
                exteriorBtn.addEventListener('click', function() {
                    // 更新按钮状态
                    document.querySelectorAll('.model-btn').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 设置外景视角
                    modelViewer.cameraOrbit = '0deg 75deg 75%';
                    modelViewer.cameraTarget = '0m 0m 0m';
                    modelViewer.fieldOfView = '30deg';
                    
                    console.log('切换到外景视角');
                });
            }

            // 内景按钮
            const interiorBtn = document.getElementById('interior-view-btn');
            if (interiorBtn) {
                interiorBtn.addEventListener('click', function() {
                    // 更新按钮状态
                    document.querySelectorAll('.model-btn').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 设置内景视角 - 在大棚内部，靠近第一个大棚区域，平视视角
                    modelViewer.cameraOrbit = '-35deg 90deg 6%'; // 90度实现平视
                    modelViewer.cameraTarget = '-14.2m 1.8m -13.2m'; // 目标点与相机位置同高，实现平视
                    modelViewer.fieldOfView = '75deg';
                    
                    console.log('切换到内景视角');
                });
            }

            // 漫游模式按钮
            const walkModeBtn = document.getElementById('walk-mode-btn');
            const walkControls = document.getElementById('walk-controls');
            let isWalkModeActive = false; // 添加漫游模式状态变量
            
            if (walkModeBtn && walkControls) {
                walkModeBtn.addEventListener('click', function() {
                    // 切换漫游模式
                    isWalkModeActive = !isWalkModeActive;
                    walkControls.style.display = isWalkModeActive ? 'flex' : 'none';
                    
                    // 显示/隐藏状态提示
                    const walkModeStatus = document.getElementById('walk-mode-status');
                    if (walkModeStatus) {
                        walkModeStatus.style.display = isWalkModeActive ? 'flex' : 'none';
                    }
                    
                    // 更新按钮状态
                    document.querySelectorAll('.model-btn').forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 漫游模式激活时保持相机控制可用
                    if (modelViewer) {
                        modelViewer.cameraControls = true; // 保持相机控制可用
                        if (isWalkModeActive) {
                            // 初始化漫游位置
                            updateWalkPosition();
                        }
                    }
                    
                    console.log('切换漫游模式:', isWalkModeActive);
                });
            }

            // 漫游控制功能
            let walkPosition = { x: -13.05, y: 1.8, z: -14.79 }; // 根据position调整初始位置
            let walkRotation = -35; // 根据rotation角度调整
            const walkSpeed = 0.2; // 减小移动速度
            const rotationSpeed = 10; // 减小旋转速度
            let targetPosition = { ...walkPosition };
            let targetRotation = walkRotation;
            let isMoving = false;

            // 平滑移动函数
            function smoothMove() {
                if (!isWalkModeActive) return;
                
                const lerpFactor = 0.1; // 插值因子，控制移动平滑度
                
                // 平滑位置移动
                walkPosition.x += (targetPosition.x - walkPosition.x) * lerpFactor;
                walkPosition.y += (targetPosition.y - walkPosition.y) * lerpFactor;
                walkPosition.z += (targetPosition.z - walkPosition.z) * lerpFactor;
                
                // 平滑旋转
                walkRotation += (targetRotation - walkRotation) * lerpFactor;
                
                updateWalkPosition();
                
                // 如果还在移动，继续动画
                if (isMoving) {
                    requestAnimationFrame(smoothMove);
                }
            }

            // 开始移动
            function startMove() {
                if (!isMoving) {
                    isMoving = true;
                    smoothMove();
                }
            }

            // 停止移动
            function stopMove() {
                isMoving = false;
            }

            // 前进
            const walkForward = document.getElementById('walk-forward');
            if (walkForward) {
                walkForward.addEventListener('click', function() {
                    const rad = (targetRotation * Math.PI) / 180;
                    targetPosition.x += Math.sin(rad) * walkSpeed;
                    targetPosition.z += Math.cos(rad) * walkSpeed;
                    startMove();
                });
            }

            // 后退
            const walkBackward = document.getElementById('walk-backward');
            if (walkBackward) {
                walkBackward.addEventListener('click', function() {
                    const rad = (targetRotation * Math.PI) / 180;
                    targetPosition.x -= Math.sin(rad) * walkSpeed;
                    targetPosition.z -= Math.cos(rad) * walkSpeed;
                    startMove();
                });
            }

            // 左转
            const walkLeft = document.getElementById('walk-left');
            if (walkLeft) {
                walkLeft.addEventListener('click', function() {
                    targetRotation -= rotationSpeed;
                    startMove();
                });
            }

            // 右转
            const walkRight = document.getElementById('walk-right');
            if (walkRight) {
                walkRight.addEventListener('click', function() {
                    targetRotation += rotationSpeed;
                    startMove();
                });
            }

            // 上升
            const walkUp = document.getElementById('walk-up');
            if (walkUp) {
                walkUp.addEventListener('click', function() {
                    targetPosition.y += walkSpeed;
                    startMove();
                });
            }

            // 下降
            const walkDown = document.getElementById('walk-down');
            if (walkDown) {
                walkDown.addEventListener('click', function() {
                    targetPosition.y = Math.max(0.1, targetPosition.y - walkSpeed);
                    startMove();
                });
            }

            // 重置位置
            const walkReset = document.getElementById('walk-reset');
            if (walkReset) {
                walkReset.addEventListener('click', function() {
                    targetPosition = { x: -13.05, y: 1.8, z: -14.79 };
                    targetRotation = -35;
                    startMove();
                });
            }

            // 更新漫游位置 - 修复版本
            function updateWalkPosition() {
                // 计算相机位置
                const cameraX = walkPosition.x;
                const cameraY = walkPosition.y;
                const cameraZ = walkPosition.z;
                
                // 计算目标点（相机前方）
                const targetDistance = 2; // 相机前方2米处
                const targetX = cameraX + Math.sin((walkRotation * Math.PI) / 180) * targetDistance;
                const targetY = cameraY;
                const targetZ = cameraZ + Math.cos((walkRotation * Math.PI) / 180) * targetDistance;
                
                // 使用model-viewer的相机控制API
                try {
                    // 设置相机位置和目标
                    modelViewer.cameraPosition = `${cameraX}m ${cameraY}m ${cameraZ}m`;
                    modelViewer.cameraTarget = `${targetX}m ${targetY}m ${targetZ}m`;
                    
                    // 强制更新相机
                    modelViewer.jumpCameraToGoal();
                } catch (error) {
                    console.log('相机控制API调用失败，使用备用方法:', error);
                    // 备用方法：使用camera-orbit
                    const distance = Math.sqrt(
                        Math.pow(cameraX - targetX, 2) + 
                        Math.pow(cameraY - targetY, 2) + 
                        Math.pow(cameraZ - targetZ, 2)
                    );
                    const azimuth = Math.atan2(cameraX - targetX, cameraZ - targetZ) * 180 / Math.PI;
                    const polar = Math.acos((cameraY - targetY) / distance) * 180 / Math.PI;
                    
                    modelViewer.cameraOrbit = `${azimuth}deg ${polar}deg ${distance}m`;
                }
                
                console.log('漫游位置更新:', {
                    position: walkPosition,
                    rotation: walkRotation,
                    camera: { x: cameraX, y: cameraY, z: cameraZ },
                    target: { x: targetX, y: targetY, z: targetZ }
                });
            }

            // 键盘控制漫游 - 改进版本
            document.addEventListener('keydown', function(event) {
                // 检查漫游模式是否激活
                if (!isWalkModeActive) {
                    return; // 静默忽略，不输出日志
                }
                
                const key = event.key.toLowerCase();
                let handled = false;
                
                switch(key) {
                    case 'w':
                    case 'arrowup':
                        if (walkForward) {
                            walkForward.click();
                            handled = true;
                        }
                        break;
                    case 's':
                    case 'arrowdown':
                        if (walkBackward) {
                            walkBackward.click();
                            handled = true;
                        }
                        break;
                    case 'a':
                    case 'arrowleft':
                        if (walkLeft) {
                            walkLeft.click();
                            handled = true;
                        }
                        break;
                    case 'd':
                    case 'arrowright':
                        if (walkRight) {
                            walkRight.click();
                            handled = true;
                        }
                        break;
                    case 'q':
                        if (walkUp) {
                            walkUp.click();
                            handled = true;
                        }
                        break;
                    case 'e':
                        if (walkDown) {
                            walkDown.click();
                            handled = true;
                        }
                        break;
                    case 'r':
                        if (walkReset) {
                            walkReset.click();
                            handled = true;
                        }
                        break;
                }
                
                // 如果处理了按键，阻止默认行为
                if (handled) {
                    event.preventDefault();
                }
            });

            // 模型加载完成事件
            modelViewer.addEventListener('load', function() {
                console.log('3D模型加载完成');
                
                // 添加加载完成的视觉效果
                const container = document.querySelector('.model-container');
                if (container) {
                    container.style.boxShadow = '0 0 30px rgba(0, 174, 255, 0.5)';
                    setTimeout(() => {
                        container.style.boxShadow = '0 0 20px rgba(0,174,255,0.15)';
                    }, 2000);
                }
            });

            // 模型加载进度事件
            modelViewer.addEventListener('progress', function(event) {
                const progress = event.detail.totalProgress;
                console.log('模型加载进度:', progress);
                
                // 可以在这里添加进度条显示
                if (progress === 1) {
                    console.log('模型加载完成');
                }
            });

            // 相机控制事件
            modelViewer.addEventListener('camera-change', function() {
                console.log('相机视角改变');
            });

            // 交互事件
            modelViewer.addEventListener('click', function(event) {
                console.log('模型被点击');
            });

            console.log('3D模型控制功能初始化完成');
        }
    </script>
</body>
</html>
